<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>修改元素样式</title>

        <style type="text/css">
            .wrapper { 
                border: 1px solid blue ;
                margin: 15px auto ;
            }

            .first {
                min-height: 200px ;
            }

            .second>button {
                margin: 15px 0 15px 15px;
            }

            .custom {
                border-color: red ;
                border-radius: 10px ;
                background-color: #dedede ;
                box-shadow: 0 0 5px 4px blue;
            }
        </style>
    </head>
    <body>

        <!-- 任意元素的 class 属性取值都可以包含 多个 class-name ，多个 class-name 之间使用空格隔开即可 -->
        <div class="wrapper first ecut soft donghua"></div>

        <div class="wrapper second">
            <button type="button" onclick="x.changeStyle()">修改样式(style)</button>
            <button type="button" onclick="x.recoverStyle()">恢复样式(style)</button>

            <button type="button" onclick="x.add()">修改样式(class)</button>
            <button type="button" onclick="x.remove()">恢复样式(class)</button>
        </div>
       
        <script>
            let x = {
                changeStyle: function(){
                    let first = document.querySelector( '.first' );
                    // 使用元素的 style 属性逐个修改样式
                    first.style.borderColor = 'red' ; // CSS: border-color
                    first.style.borderRadius = '10px' ; // border-radius
                    first.style.backgroundColor = '#dedede' ; // background-color
                    first.style.boxShadow = '0 0 5px 4px blue'; // box-shadow
                } ,
                recoverStyle: function(){
                    let first = document.querySelector( '.first' );
                    // 使用元素的 style 属性逐个修改样式
                    first.style.borderColor = 'blue' ;
                    first.style.borderRadius = '0' ;
                    first.style.backgroundColor = 'transparent' ;
                    first.style.boxShadow = 'none';
                },
                add: function(){
                    let first = document.querySelector( '.first' );
                    console.log( first.className , typeof( first.className ) );
                    let list = first.classList ;
                    console.log( list );
                    // 如果 list 中不包含 custom 这个 class-name 
                    if( !list.contains( 'custom' ) ){
                        // 则将 custom 添加到 list 中
                        list.add( 'custom' ) ; // 通过对 list 的修改来影响元素的 class 取值列表
                    }
                },
                remove: function(){
                    let first = document.querySelector( '.first' );
                    let list = first.classList ;
                    console.log( list );
                    // 如果 list 中包含 custom 这个 class-name 
                    if( list.contains( 'custom' ) ){
                        // 则将 custom 从 list 中 删除
                        list.remove( 'custom' ) ; // 通过对 list 的修改来影响元素的 class 取值列表
                    }
                }
            }
        </script>
        
    </body>
</html>